<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<view class="header">
			<h2>订单</h2>
			<view class="sele">
				<view class="item" @tap="show2 = true">
					<span>{{ seleDate }}</span>
					<image src="@/static/img/down.png" mode=""></image>
				</view>
				<view v-if="userInfo.is_leader == 1" class="item" @tap="routerTo('/pages/pageB/data/fiter?status=2')">
					<span>人员筛选</span>
					<image src="@/static/img/down.png" mode=""></image>
				</view>
				<view v-if="userInfo.is_manager == 1" class="item" @tap="show4 = true">
					<span>部门筛选</span>
					<image src="@/static/img/down.png" mode=""></image>
				</view>
				<view class="item" @tap="show1 = true">
					<span>{{ seleStu }}</span>
					<image src="@/static/img/down.png" mode=""></image>
				</view>
			</view>
		</view>
		<view v-if="list.length == 0 && isShow" class="kong">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无订单"></u-empty>
		</view>
		<ul class="list" v-if="isShow">
			<li v-for="(item, index) in list" :key="index">
				<view class="top">
					<view class="info">
						<view class="name">{{item.order.nickname}}</view>
					</view>
					<view class="post">{{item.order.department}}</view>
				</view>
				<view class="one">
					<view class="msg">订单编号：{{ item.tag }}</view>
					<view class="tag">
						<span v-if="item.status == 11">在途</span>
						
						<span v-if="item.status == 12">派件</span>
						
						<span v-if="item.status == 15">转投</span>
						<span v-if="item.status == 16">疑难</span>
						<span v-if="item.status == 17">拒签</span>
					</view>
				</view>
				<view class="two">
					<view class="img">
						<image :src="item.cover_ico" mode=""></image>
					</view>
					<view class="info msg">
						<view class="tit">{{ item.product_name }}</view>
						<view class="sku">{{ item.parameters }}</view>
					</view>
					<view class="info right">
						<view class="price">￥{{ item.price }}</view>
						<view class="num">X{{ item.num }}</view>
					</view>
				</view>
				<view class="timemsg">订单时间：{{ item.pay_time_text }}</view>
				<view class="the">
					<view class="msg">快递单号：{{ item.tool }}</view>
					<view class="btn on" @tap="showOrder(item)">查看物流</view>
				</view>
			</li>
		</ul>
		<u-popup :show="show" :round="10" mode="bottom" @close="show = false">
			<view class="popup">
				<view class="popupHeader">
					<view class="num" v-if="logistshow">
						<span>{{ seleOrder.tool_name }}：</span>
						<span>{{ seleOrder.tool }}</span>
						<view class="btn" @tap="copy(seleOrder.tool)">复制</view>
					</view>
					<view class="mun" v-else></view>
					<image @tap="show = false" class="close" src="@/static/img/close.png" mode=""></image>
				</view>
				<view class="goods">
					<view class="two">
						<view class="img">
							<image :src="seleOrder.cover_ico" mode=""></image>
						</view>
						<view class="info msg">
							<view class="tit">{{ seleOrder.product_name }}</view>
							<view class="sku">{{ seleOrder.parameters }}</view>
						</view>
						<view class="info right">
							<view class="price">￥{{ seleOrder.price }}</view>
							<view class="num">X{{ seleOrder.num }}</view>
						</view>
					</view>
				</view>
				<view class="popupinfo">
					<view class="item">
						<span>下单人：</span>
						<span>{{ add.realname }}</span>
					</view>
					<view class="item">
						<span>下单电话：</span>
						<span>{{ add.mobile }}</span>
					</view>
				</view>
				<view class="add">
					<view class="img">
						<image src="@/static/img/car.png" mode=""></image>
					</view>
					<view class="msg">
						<view :class="{ item: true }">
							<span>订单编号：</span>
							<span class="txt">{{ seleOrder.tag }}</span>
							<view class="btn" @tap="copy(seleOrder.tag)">复制</view>
						</view>
						<view :class="{ item: true, expand: expand }">
							<span>收货地址：</span>
							<span class="txt">{{ add.province }}{{ add.city }}{{ add.district }}{{ add.address }}</span>
							<view class="more" @tap="expand = !expand">
								<span v-if="!expand">展开</span>
								<span v-else>收起</span>
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="wuliu" scroll-y="true">
					<lee-logistics color="#0a84ff" :showCard="false" :list="logist"></lee-logistics>
				</scroll-view>
			</view>
		</u-popup>
		<u-datetime-picker
			:show="show2"
			v-model="value1"
			mode="date"
			:maxDate="maxDate1"
			@cancel="show2 = false"
			@close="show2 = false"
			@confirm="confirm1"
			title="开始时间"
			:closeOnClickOverlay="true"></u-datetime-picker>
		<u-datetime-picker
			:show="show3"
			v-model="value2"
			mode="date"
			:maxDate="maxDate2"
			:minDate="minDate2"
			@cancel="show3 = false"
			@close="show3 = false"
			@confirm="confirm2"
			title="结束时间"
			:closeOnClickOverlay="true"></u-datetime-picker>
		<u-picker :show="show1" :columns="columns" @cancel="show1 = false" @close="show1 = false" :closeOnClickOverlay="true" keyName="name" @confirm="confirm"></u-picker>
		<!-- <innerTabbar seleTabbar="1"></innerTabbar> -->
		<u-picker :show="show4" :columns="columns2" @cancel="show4 = false" @close="show4 = false" :closeOnClickOverlay="true" keyName="name" @confirm="confirm3"></u-picker>
	</view>
</template>

<script>
	import leeLogistics  from '@/components/StarLee-logistics/logistics.vue'
import { Productlist,innerinfo,Transport,logisticsInfo,departments } from '@/api/inner.js';
import innerTabbar from '../../components/innerTabbar.vue';
export default {
	components: {
		innerTabbar,
		leeLogistics
	},
	data() {
		return {
			isShow: false,
			show: false,
			expand: false,
			show1: false,
			columns: [
				[
					{
						name: '派送订单',
						id: 12
					},
					{
						name: '疑难订单',
						id: '15,16,17'
					},
					{
						name: '在途订单',
						id: 11
					},
				]
			],
			show2: false,
			value1: Number(new Date()),
			maxDate1: Number(new Date()),
			show3: false,
			value2: Number(new Date()),
			maxDate2: Number(new Date()),
			minDate2: Number(new Date()),
			seleDate: '时间筛选',
			seleStu: '订单状态',
			data: {
				page_size: 15,
				start_date: '', //开始日期
				end_date: '', //结束日期
				status: '',
				department_user_id: '',
				department_id:'',
				page:1
			},
			list: [],
			userInfo:{},
			seleOrder:{},
			add:{},
			logist:[],
			logistshow:false,
			watermark:'',
			last_page:'',
			show4:false,
			columns2:[]
		};
	},
	onLoad(e) {
		if(e.id){
			this.data.department_user_id = e.id
		}
		if(e.type == 1){
			this.seleStu = '派送订单'
			this.data.status = 12
		}else if(e.type == 2){
			this.seleStu = '疑难订单'
			this.data.status = '15,16,17'
		}else{
			this.seleStu = '在途订单'
			this.data.status = 11
		}
		this.getInfo()
		this.getList();
		this.getBm()
		this.watermark = uni.getStorageSync('watermark')
	},
	onReachBottom() {
		if(this.data.page == this.last_page){
			uni.showToast({
				title:'已经是最后一页了',
				icon:'none'
			})
		}else{
			this.data.page++
			this.getList()
		}
	},
	methods: {
		confirm3(e){
			this.txt = e.value[0].name
			this.data.department_id = e.value[0].id
			this.getList()
			this.show4 = false
		},
		async getBm(){
			let res = await departments()
			console.log(res)
			this.columns2.push(res.data)
		},
		copy(value){
			uni.setClipboardData({
			    data:value, //要被复制的内容
			    success:() => { //复制成功的回调函数
			      uni.showToast({ //提示
			        title:'复制成功'
			      })
			    }
			});
		},
		showOrder(item){
			this.logist = []
			Transport({
				id:item.order.addressid
			}).then(res => {
				if(res.code == 1){
					this.add = res.data
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			})
			logisticsInfo({
				id:item.id
			}).then(res => {
				console.log(res)
				if(res.code == 1){
					this.logistshow = true
					res.data.forEach((item,index) => {
							this.logist.push({
								status:item.status,
								content:item.context,
								time:item.time
							})
					})
				}else{
					this.logistshow = false
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			})
			this.seleOrder = item
			this.show = true
		},
		async getInfo(){
			let res = await innerinfo()
			this.userInfo = res.data
		},
		confirm(e) {
			// console.log(e)
			this.data.status = e.value[0].id;
			this.getList();
			this.seleStu = e.value[0].name;
			this.show1 = false;
		},
		confirm1(e) {
			let date = new Date(e.value);
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate()
			this.data.start_date = `${y}-${m}-${d}`;
			this.minDate2 = e.value;
			this.show3 = true;
			this.show2 = false;
		},
		confirm2(e) {
			let date = new Date(e.value);
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate()
			this.data.end_date = `${y}-${m}-${d}`;
			this.seleDate = `${this.data.start_date} - ${this.data.end_date}`;
			this.getList();
			this.show3 = false;
		},
		async getList() {
			if(this.data.page == 1){
				this.list = []
			}
			let res = await Productlist(this.data);
			this.last_page = res.data.last_page
			console.log(res)
			if (res.code == 1) {
				res.data.data.forEach((item,index) => {
					this.list.push(item)
				})
			} else {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
			this.isShow = true;
		},
		routerTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	min-height: calc(100vh - 50px);
	background-color: #f2f4f5;
	/deep/.lee-list-box{
		padding: 2px 0px !important;
	}
	/deep/.lee-flex:last-child{
		padding-bottom: 0px !important;
	}
	.kong {
		padding-top: 35px;
		/deep/.u-empty {
			// background-color: #fff;
			border-radius: 6px;
			padding-bottom: 10px;
		}
	}
	.header {
		background-color: #fff;
		padding: 20px 15px 10px;
		h2 {
			font-size: 20px;
			color: #3d3d3d;
			margin-bottom: 15px;
			font-weight: 700;
		}
		.search {
			width: 100%;
			border-radius: 10px;
			background-color: #f2f3f7;
			display: flex;
			align-items: center;
			padding: 10px 12px;
			margin-bottom: 15px;
			image {
				width: 12px;
				height: 12px;
				margin-right: 7px;
			}
			input {
				flex: 1;
			}
		}
		.sele {
			display: flex;
			.item {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #232323;
				font-size: 12px;
				image {
					width: 15px;
					height: 15px;
				}
			}
		}
	}
	.list {
		padding: 15px;
		padding-bottom: 55px;
		li {
			background-color: #fff;
			border-radius: 10px;
			padding: 10px 15px;
			margin-bottom: 15px;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 7px;
				border-bottom: 1px solid #e2e2e2;
				margin-bottom: 7px;
				.info {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #3d3d3d;
					image {
						width: 28px;
						height: 28px;
						border-radius: 100px;
						margin-right: 10px;
					}
				}
				.post {
					font-size: 12px;
					color: #999999;
				}
			}
			.one {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10px;
				.msg {
					font-size: 11px;
					color: #666666;
				}
				.tag {
					font-size: 14px;
					color: #3aa2ff;
				}
			}
			.two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.img {
					image {
						width: 80px;
						height: 70px;
						border-radius: 5px;
					}
				}
				.msg {
					flex: 1;
					margin: 0 10px 0 5px;
				}
				.right {
					align-items: end;
					font-size: 13px;
					color: #666666;
				}
				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 70px;
					font-size: 14px;
					.tit {
						color: #232323;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					.sku {
						color: #666666;
					}
				}
			}
			.timemsg{
				margin-top: 10px;
				color: #999;
				font-size: 12px;
			}
			.the {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				.msg {
					font-size: 12px;
					color: #999999;
				}
				.btn {
					font-size: 14px;
					width: 80px;
					padding: 5px 0;
					text-align: center;
					border-radius: 1000px;
				}
				.on {
					color: #fff;
					background-color: #3aa2ff;
				}
			}
		}
	}
	.popup {
		padding: 20px 15px;
		.wuliu {
			max-height: 300px;
		}
		.popupHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			.num {
				display: flex;
				align-items: center;
				span {
					font-size: 14px;
				}
				span:first-child {
					color: #0a84ff;
				}
				span:last-child {
					color: #3d3d3d;
				}
				.btn {
					padding: 2px 5px;
					border: 1px solid #9c9c9c;
					border-radius: 5px;
					font-size: 12px;
					margin-left: 3px;
				}
			}
			.close {
				width: 30px;
				height: 30px;
			}
		}
		.goods {
			padding-bottom: 8px;
			border-bottom: 1px solid #eeeeee;
			margin-bottom: 15px;
			.two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.img {
					image {
						width: 80px;
						height: 70px;
						border-radius: 5px;
					}
				}
				.msg {
					flex: 1;
					margin: 0 10px 0 5px;
				}
				.right {
					align-items: end;
					font-size: 13px;
					color: #666666;
				}
				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 70px;
					font-size: 14px;
					.tit {
						color: #232323;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					.sku {
						color: #666666;
					}
				}
			}
		}
		.popupinfo {
			display: flex;
			justify-content: space-between;
			padding-bottom: 15px;
			border-bottom: 1px solid #eeeeee;
			margin-bottom: 15px;
			.item {
				font-size: 16px;
				color: #666666;
			}
		}
		.add {
			display: flex;
			align-items: center;
			.img {
				width: 22px;
				height: 16px;
				margin-right: 10px;
				image {
					width: 22px;
					height: 16px;
					vertical-align: top;
				}
			}
			.msg {
				flex: 1;
				.item:first-child{
					margin-bottom: 5px;
				}
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 16px;
					color: #232323;
					.btn {
						padding: 2px 5px;
						border: 1px solid #9c9c9c;
						border-radius: 5px;
					}
					.txt {
						// width: 210px;
						flex:1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						word-break: break-all;
					}
					.more {
						color: #9f9f9f;
						padding: 2px 5px;
						border: 1px;
					}
				}
				.expand {
					align-items: start;
					.txt {
						-webkit-line-clamp: 10;
					}
				}
			}
		}
	}
}
</style>
